var Resident = Class.create();
Object.extend(Resident, {
	makeSelect: function(data, first, opts, defaultValue){
		var select = '<select ';
		$H(opts).each(function(item){
			select += item['key']+"="+item['value']+" ";
		});
		select += ">";
		select += "<option value=''>"+first+"</option>";
		data.each(function(item){
			select += "<option value='"+item+"'"+(defaultValue==item?' selected':'')+">"+item+"</option>";
		});
		select += "</select> "
		return select;
	},
	pFirst : '---省---',
	cFirst : '---市---',
	dFirst : '---区---',
	fillData: function(obj, first, data, def){
		obj.options.add(new Option(first, ''));
		data.each(function(item){
			obj.options.add(new Option(item, item));
			
			if(data.length==1 || item==def) {
				obj.selectedIndex = obj.options.length-1;
				Element.fire(obj, 'widget:change', {type:1});
			}
		});
	},
	emptyData: function(obj){
		obj.innerHTML = '';
	}
});

Object.extend(Resident.prototype, {
	prefix: '',
	province: '',
	city: '',
	district: '',
	pindex: 0,
	cindex: 0,
	initialize: function(prefix, defaultProvince, defaultCity, defaultDistrict){
		this.prefix = prefix;
		this.province = defaultProvince;
		this.city = defaultCity;
		this.district = defaultDistrict;
	},
	getHtml: function(){
		var ret = '';
		var province = Resident.makeSelect(StandardProp.provinces, Resident.pFirst, {id: this.prefix+'province',name: this.prefix+'province'}, this.province);
		var city = Resident.makeSelect([], Resident.cFirst, {id: this.prefix+'city', name: this.prefix+'city'}, '');
		var district = Resident.makeSelect([], Resident.dFirst, {id: this.prefix+'district', name: this.prefix+'district'}, '');
		ret += province + city + district;
		return ret;
	},
	write: function(){
		document.write(this.getHtml());
		this.bindHandlers();
		
		this.change();
	},
	bindHandlers: function(){
		$(this.prefix+'province').observe('change', this.change.bindAsEventListener(this));
		$(this.prefix+'city').observe('change', this.change.bindAsEventListener(this));
		$(this.prefix+'province').observe('widget:change', this.change.bindAsEventListener(this));
		$(this.prefix+'city').observe('widget:change', this.change.bindAsEventListener(this));
	},
	change: function(event){
		var flag = 0;
		if(event){
			event = $E(event);
			if(event['memo']){
				flag = event.memo.type;
			}
		}
		var p = $(this.prefix + 'province');
		var c = $(this.prefix + 'city');
		var pindex = p.selectedIndex;
		
		if(pindex>0 && pindex!=this.pindex){
			this.pindex = pindex;
			this.fillCity();
		}else if(pindex==0){
			this.pindex = pindex;
			Resident.emptyData($(this.prefix+'city'));
			Resident.fillData($(this.prefix+'city'), Resident.cFirst, []);
		}
		
		var cindex = c.selectedIndex;
		if(cindex>0 && (cindex!=this.cindex || flag)){
			this.cindex = cindex;
			this.fillDistrict();
		}else if(cindex==0){
			this.cindex = cindex;
			Resident.emptyData($(this.prefix+'district'));
			Resident.fillData($(this.prefix+'district'), Resident.dFirst, []);
		}
	},
	fillCity: function(){
		var obj = $(this.prefix + 'city');
		Resident.emptyData(obj);
		Resident.fillData(obj, Resident.cFirst, StandardProp.cities[this.pindex-1], this.city);
	},
	fillDistrict: function(){
		var obj = $(this.prefix + 'district');
		Resident.emptyData(obj);
		Resident.fillData(obj, Resident.dFirst, StandardProp.districts[this.pindex-1][this.cindex-1], this.district);
	}
});